<template>
  <div class="sortingHome">
    <div class="cardBox">
      <div class="cardItem">
        <div class="cardItemTitle">今日收件单数</div>
        <div class="cardContent">{{statistics.toady_cnt}}单</div>
      </div>
      <div class="splitArea"></div>
      <div class="cardItem">
        <div class="cardItemTitle red">今日寄件单数</div>
        <div class="cardContent">{{statistics.toady_send_cnt}}单</div>
      </div>
      <div class="splitArea"></div>
      <div class="cardItem">
        <div class="cardItemTitle blue">本周收件单数</div>
        <div class="cardContent">{{statistics.week_cnt}}单</div>
      </div>
      <div class="splitArea"></div>
      <div class="cardItem">
        <div class="cardItemTitle blue">本周寄件单数</div>
        <div class="cardContent">{{statistics.week_send_cnt}}单</div>
      </div>
      <div class="splitArea"></div>
      <div class="cardItem">
        <div class="cardItemTitle">本月收件物流单数</div>
        <div class="cardContent">{{statistics.mouth_cnt}}单</div>
      </div>
      <div class="splitArea"></div>
      <div class="cardItem">
        <div class="cardItemTitle">本月寄件物流单数</div>
        <div class="cardContent">{{statistics.mouth_send_cnt}}单</div>
      </div>
    </div>
    <zyInfoPanel title="快递数据统计" :showUnfoldButton="false" class="chartArea">
      <div class="timeSelect" slot="title">
        <el-select v-model="equipment_id" modalable placeholder="请选择" v-if="companyType === 2" collapse-tags
                   class="inputArea" @change="getData">
          <el-option v-for="option in equipmentList" :key="option.value" :label="option.label"
                     :value="option.value"></el-option>
        </el-select>
        <el-date-picker v-model="time" type="year" placeholder="选择日期" class="inputArea"
                        @change="getData"></el-date-picker>
      </div>
      <div id="cooperate_chart" v-loading="loading"></div>
    </zyInfoPanel>
  </div>
</template>

<script>
	import {mapGetters} from "vuex";

	export default {
		name: "cooperateHome",
		props: {},
		data() {
			return {
				statistics: {},
				loading: false,
				time: new Date(),
				tableList: [
					{
						title: '企业名称',
						name: 'company_name',
					},
					{
						title: '今日收件量',
						name: 'collect_count',
					},
					{
						title: '今日寄件量',
						name: 'send_count',
					},
					{
						title: '总计',
						name: 'count',
					},
				],
				dayTableData: [],
				monthTableData: [],
				equipment_id: '',
				equipmentList: []
			};
		},
		computed: {
			...mapGetters(['companyType']),
		},
		watch: {},
		components: {},
		methods: {
			getData() {
				this.loading = true;
				this.$axios.post(this.$api.s_index, {
					year: this.$Timestamp(this.time, 'year'),
					equipment_id: this.equipment_id
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.statistics = data;
						let timeData = [], receiveData = [], sendData = [];
						for (var key in data.send) {
							timeData.push(key + '月');
							sendData.push(data.send[key]);
						}
						for (var key2 in data.received) {
							receiveData.push(data.received[key2]);
						}
						this.draw(timeData, receiveData, sendData);
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			draw(timeData, receiveData, sendData) {
				let that = this;
				this.myChart = this.$echarts.init(document.getElementById('cooperate_chart'));
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#9BA3AF'
							}
						},
						formatter: function (value) {
							if(value.length>1){
								return `${that.$Timestamp(that.time, 'year')}年${value[0].axisValue}<br>${value[0].seriesName}：${value[0].value}<br>${value[1].seriesName}:${value[1].value}`;
							}else{
								return `${that.$Timestamp(that.time, 'year')}年${value[0].axisValue}<br>${value[0].seriesName}：${value[0].value}`;
							}
						}
					},
					legend: {
						data: ['收件', '寄件'],
						bottom: '0',
					},
					grid: {
						top: '12px',
						left: '3%',
						right: '4%',
						bottom: '20px',
						containLabel: true
					},
					xAxis: {
						axisLabel: {
							textStyle: {
								color: "#9BA3AF",
								fontSize: 12,
							},
							formatter: '{value}'
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(199, 203, 209, 0.5)'
							}
						},
						type: 'category',
						boundaryGap: false,
						data: timeData
					},
					yAxis: [{
						type: 'value',
						axisTick: {show: false},
						axisLine: {
							lineStyle: {
								color: 'rgba(60,121,237,.1)'
							}
						},
						axisLabel: {
							textStyle: {
								color: "#9BA3AF",
								fontSize: 12,
							},
							formatter: function (value) {
								return value;
							}
						},
						splitLine: {
							lineStyle: {
								color: 'rgba(44, 55, 76, 0.15)'
							}
						}
					}],
					series: [
						{
							name: '收件',
							type: 'line',
							stack: '总量',
							data: receiveData,
							color: '#0077FB',
							lineStyle: {
								normal: {           //F86C6B
									color: '#0077FB',
									width: 4,
								}
							},
						},
						{
							name: '寄件',
							type: 'line',
							stack: '总量',
							data: sendData,
							color: '#FBDB01',
							lineStyle: {
								normal: {
									color: '#FBDB01',
									width: 4,
								}
							},
						},
					]
				};
				this.myChart.setOption(option);
			},
			getEquipmentList() {
				this.$axios.post(this.$api.equipmentList, {
					pagination: {
						page_start: 1,
						page_size: 9999
					}
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.equipmentList = JSON.parse(JSON.stringify(data.list)).filter((item, index) => {
							if (index === 0) {
								item.label = '全部';
								item.value = '';
							} else {
								item.label = item.equipment_name;
								item.value = item.equipment_id;
							}
							return item
						});
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
		},
		mounted() {
			this.getData();
			this.getEquipmentList();
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/home/index.less">

</style>
